<script setup lang="ts">
</script>

<template>
  <div class="tip">
    <div class="department">
      <div class="header">
        <div class="title">常见科室</div>
        <div class="all">
          <span >全部</span>
          <svg t="1728026568110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="14" height="14"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#4490F1" p-id="4246"></path></svg>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>神经内科</li>
          <li>消化内科</li>
          <li>呼吸内科</li>
          <li>内科</li>
          <li>神经外科</li>
          <li>妇科</li>
          <li>产科</li>
          <li>儿科</li>
        </ul>
      </div>
    </div>
    <div class="notice">
      <div class="header">
        <div class="title">
          <div class="icon"><svg t="1728026974143" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13961" id="mx_n_1728026974144" width="30" height="30"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#E9F4FF" p-id="13962"></path><path d="M332.928 588.8v-204.8H230.4v204.8h102.528z m51.2 51.2h-162.304C198.2976 640 179.2 617.9072 179.2 590.7456v-208.6912C179.2 354.9184 198.3232 332.8 221.7984 332.8h162.3296v307.2z" fill="#040405" p-id="13963"></path><path d="M669.5168 588.8a5.6576 5.6576 0 0 0 0.2048-0.3072l-0.2048 0.3072z m2.1504-8.6016v-161.8688c0-2.56-0.4352-4.7616-1.0496-6.4256H640v174.72h30.6176a18.7648 18.7648 0 0 0 1.0496-6.4zM588.8 637.7984V360.704h87.936c25.4208 0 46.1312 25.856 46.1312 57.6v161.8944c0 31.744-20.608 57.6-46.1312 57.6H588.8z m242.8928-162.4064h-43.9552c9.6256 0 17.024 3.328 21.9648 8.0128 4.9664-4.7104 12.3392-8.0128 22.016-8.0128z m-43.9552 47.616h43.9552c-9.6512 0-17.024-3.328-21.9904-8.0128-4.9408 4.7104-12.3392 8.0128-21.9648 8.0128z m0-51.2h43.9552c12.1088 0 21.9392 12.288 21.9392 27.392 0 15.104-9.8304 27.392-21.9392 27.392h-43.9552c-12.1088 0-21.9392-12.288-21.9392-27.392 0-15.104 9.8304-27.392 21.9392-27.392z m55.5264 171.52a23.552 23.552 0 0 0-1.7408-1.7408l-31.8976-22.9888c9.0624 6.528 11.776 15.0272 9.6 22.656 7.5264-2.2528 16.128-1.9456 24.0384 2.048z m-67.2 13.568a23.552 23.552 0 0 0 1.7408 1.7152l31.8976 22.9888c-9.0624-6.528-11.776-15.0272-9.6-22.656-7.5264 2.2528-16.128 1.9456-24.0384-2.048z m25.5744-44.2368l37.9904 27.392c10.496 7.5776 14.08 24.32 8.0384 37.4528-6.0416 13.1072-19.456 17.5872-29.952 10.0352l-38.016-27.392c-10.496-7.5776-14.08-24.32-8.0384-37.4528 6.0416-13.0816 19.456-17.5872 29.952-10.0352z m8.0896-295.8848l-31.9232 23.04a23.552 23.552 0 0 0-1.7408 1.7152c7.8848-4.0192 16.5376-4.352 24.064-2.048-2.176-7.68 0.512-16.1536 9.6-22.7072z m-0.1024 63.0272l31.8976-22.9888a23.552 23.552 0 0 0 1.7408-1.7408c-7.8848 3.9936-16.512 4.352-24.064 2.048 2.176 7.6544-0.512 16.128-9.5744 22.6816z m-29.952-41.5488l38.016-27.392c10.496-7.552 23.936-3.072 29.9776 10.0352 6.0672 13.1072 2.4576 29.8752-8.0384 37.4272l-37.9904 27.392c-10.496 7.5776-23.936 3.072-29.9776-10.0096-6.0672-13.1072-2.4576-29.8752 8.0384-37.4528z" fill="#2E9AFC" p-id="13964"></path><path d="M587.8528 700.3136v-0.128 0.128z m0-415.7184L384 384.4096v190.7712l203.8528 112.64v-403.2zM593.536 742.4c-8.2432 0-16.384-2.048-23.4752-5.9392L332.8 605.3888v-252.928l239.232-117.12c22.144-10.9312 49.92-3.0976 61.696 17.3824 3.456 6.1184 5.3248 12.9024 5.3248 19.712v427.8784c0.1024 23.2448-20.3776 42.0864-45.5168 42.0864z" fill="#040405" p-id="13965"></path><path d="M314.368 789.9136h-39.936c-24.2688 0-44.032-20.8384-44.032-46.4128V588.8h128v154.7008c0 25.6-19.7632 46.4128-44.032 46.4128zM298.3936 742.4c4.8384 0 8.7808-10.5984 8.7808-23.6288V640h-25.5232v78.7712c0 13.0304 3.9424 23.6288 8.7808 23.6288h7.936z" fill="#040405" p-id="13966"></path></svg></div>
          <span>平台公告</span>
        </div>
        <div class="all">
          <span>全部</span>
          <svg t="1728026568110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="14" height="14"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#4490F1" p-id="4246"></path></svg>
        </div>
      </div>
      <div class="content">
        <ul>
          <li class="notice-wrapper">
            <div class="space"></div> 
            <span class="notice_text ">关于延长北京大学国际医院放假的通知 </span>
        </li> 
        <li class="notice-wrapper">
          <div class="space"></div>
           <span class="notice_text">北京中医药大学东方医院部分科室医生门诊医 </span>
        </li> 
        <li class="notice-wrapper">
            <div class="space"></div> 
            <span class="notice_text"> 武警总医院号源暂停更新通知 </span>
        </li>
        </ul>
      </div>
    </div>
    <div class="notice">
      <div class="header">
        <div class="title">
          <svg t="1728112691565" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40116" width="20" height="20"><path d="M115.479782 1024A115.536809 115.536809 0 0 1 0 908.520218V335.284284a115.479782 115.479782 0 0 1 115.536809-115.479782H280.5731L489.805356 10.686299a34.216232 34.216232 0 0 1 7.014328-5.702705 35.470827 35.470827 0 0 1 32.790555-1.710811l1.596758 0.741351 2.566217 1.482704 0.627297 0.399189a38.436234 38.436234 0 0 1 3.991894 3.079461l1.425676 1.311622 209.17523 209.118203h161.899803A115.479782 115.479782 0 0 1 1026.48695 335.284284v573.12188a115.479782 115.479782 0 0 1-115.479782 115.479782z m-41.059478-681.758416v555.899711a50.297861 50.297861 0 0 0 50.354887 50.29786H902.738245a50.297861 50.297861 0 0 0 50.297861-50.29786V342.241584a50.297861 50.297861 0 0 0-50.297861-50.29786H821.18956l50.012725 50.012725a35.470827 35.470827 0 0 1-50.126779 50.126779l-100.139505-100.139504H308.687437L208.547932 392.083228a35.470827 35.470827 0 0 1-50.126779-50.126779l50.012725-50.012725H124.832219a50.297861 50.297861 0 0 0-50.411915 50.29786z m306.349327-122.380055h268.027148L514.783205 85.904982zM263.636065 797.716655a29.254878 29.254878 0 1 1 0-57.027053h499.499955a29.254878 29.254878 0 1 1 0 57.027053z m0-228.108211a29.254878 29.254878 0 1 1 0-57.027053h499.499955a29.254878 29.254878 0 1 1 0 57.027053z" fill="#FFAA51" p-id="40117"></path></svg>
          <span>公告</span>
        </div>
        <div class="all">
          <span>全部</span>
          <svg t="1728026568110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="14" height="14"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#4490F1" p-id="4246"></path></svg>
        </div>
      </div>
      <div class="content">
        <ul>
          <li class="notice-wrapper">
            <div class="space"></div> 
            <span class="notice_text "> 中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告  </span>
        </li> 
        <li class="notice-wrapper">
          <div class="space"></div>
           <span class="notice_text"> 首都医科大学附属北京潞河医院老年医学科门诊停诊公告  </span>
        </li> 
        <li class="notice-wrapper">
            <div class="space"></div> 
            <span class="notice_text"> 中日友好医院中西医结合心内科门诊停诊公告  </span>
        </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped >
.tip {
  .department {
    .header {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 16px;
        color: #333;
        font-weight: 700;
      }
      .all {
        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
    .content {
      margin: 20px 0 0 -15px;
      ul {
        display: flex;
        justify-content: space-betwen;
        flex-wrap: wrap;
        li {
          width: 35%;
          height: 30px;
          line-height: 30px;
          margin-left: 30px;
          font-size: 14px;
          color: #333;
          cursor: pointer;
        }
        li:hover {
          color: #4490F1;
        }
      }
    }
  }
  .notice {
    margin: 40px 0 0 26px;
    .header {
      display: flex;
      justify-content:space-around;
      align-items: center;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          font-size: 16px;
          color: #333;
          font-weight: 700;
        }
        .icon {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
      }
      .all {
        font-size: 14px;
        color: #999;
      }
    }
    .content {
      margin-top: 17px;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-around;
      // align-items: center;
      font-size: 14px;
      color: #333;
      ul {
        li {
          margin-top: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        li:hover {
          color: #4490F1;
        }
      }
    }
  }
}
</style>